<template>
  <div class="project_info">
    <div class="project_info_title">
      <div ref="projectTitleRef" class="project_info_title_font">{{ title }}</div>
      <div class="project_info_title_btn">查看详情</div>
    </div>
    <div class="project_info_center">
      <div v-for="(item,index) in projectCenter" :key="index" class="project_info_center_each">
        <span class="name">{{ item.name }} :</span>
        <span class="content">{{ item.content }}</span>
      </div>
    </div>
    <div :class="['project_info_conter',titleLong?'singleRow':'dbRow']">
      <span class="name">{{ name }} :</span>
      <span class="content">{{ content }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProjectInfo',
  props: {
    projectInfo: {
      type: Object,
      default: () => {}
    },
    title: {
      type: String,
      default: () => ''
    },
    projectCenter: {
      type: Array,
      default: () => ([])
    },
    content: {
      type: String,
      default: () => ''
    }
  },
  data() {
    return {
      name: '项目内容',
      titleLong: false
    };
  },
  watch: {
    title: {
      immediate: true,
      handler: function(a) {
        this.$nextTick(() => {
          this.getProjectTitleHight();
        });
      }
    }
  },
  methods: {
    getProjectTitleHight() {
      this.titleLong = this.$refs.projectTitleRef.offsetHeight > 40;
    }
  }
};
</script>

<style lang='scss' scoped>
  .project_info{
    width: 100%;
    height: 100%;
    .project_info_title{
      width: 100%;
      display: flex;
      justify-content: space-between;
      .project_info_title_font{
        font-size: 22px;
        font-family: PingFangSC, PingFangSC-Medium;
        color: #333333;
        width: calc(100% - 100px);
        overflow: hidden;
        text-overflow: ellipsis;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp: 2,
      }
      .project_info_title_btn{
        width: 96px;
        height: 32px;
        opacity: 1;
        background: #ffffff;
        border: 1px solid #1492ff;
        border-radius: 3px;
        text-align: center;
        line-height: 32px;
        color: #1492ff;
        font-size: 16px;
        font-family: PingFangSC, PingFangSC-Regular;
        cursor: pointer;
      }
    }
    .project_info_center{
      .project_info_center_each{
        font-size: 18px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        padding-bottom: 4px;
        .name{
          color: #999999;
        }
        .content{
          color: #000;
          padding-left: 6px;
        }
      }
    }
    .project_info_conter{
        font-size: 18px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        .name{
          color: #999999;
        }
        .content{
          color: #000;
          padding-left: 6px;
        }
    }
    .singleRow {
      white-space: nowrap;
    }
    .dbRow {
      display:-webkit-box;
      -webkit-box-orient:vertical;
      -webkit-line-clamp: 2,
    }
  }
</style>
